<template>
	<view class="edit-phone">
		<view class="content">
			<uni-forms ref="formRef" :rules="rules" :model="formData">
				<uni-forms-item name="oldpass">
					<view class="item">
						<view class="label"> 国家/地区 </view>
						<view class="value">
							<view class="text"> 中国大陆 </view>
							<image src="/static/icon/order/right.png" class="right" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="mobile">
					<view class="item">
						<view class="label"> 手机号 </view>
						<view class="value">
							<uni-easyinput type="number" class="easy-input" v-model="formData.mobile" placeholder="请输入您的手机号" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
							<image src="/static/icon/order/right.png" class="right" />
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="code">
					<view class="item">
						<view class="label"> 验证码 </view>
						<view class="value">
							<uni-easyinput type="number" class="easy-input" v-model="formData.code" placeholder="请输入验证码" placeholderStyle="font-size: 14px;color: #C4C4C4;" :input-border="false" :clearable="false" />
							<YzmBtn :mobile="formData.mobile" @getYzm="getYZM" />
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="btn" @tap="submit"> 提交 </view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import YzmBtn from '@/components/YzmBtn.vue';
	import { isMobile, isNull } from '@/utils/valdate.js'
	import { useUserStore } from '@/store/index.js'
	import { GetYzmApi, ChangePhoneApi } from '@/service/index.js'
	const formRef = ref()
	const formData = ref({
		mobile: '',   // 新手机号
		code: '', // 新手机号验证码
		type: 1,
	})
	const rules = {
		mobile: isMobile(),
		code: isNull('验证码'),
	}
	// 获取验证码
	const getYZM = () => {
		let params = {
			mobile: formData.value.mobile,
			type: 'modify'
		}
		GetYzmApi(params).then(res => {
			console.log(res);
		})
	}
	const submit = () => {
		const { GETUSERINFO } = useUserStore()
		formRef.value.validate().then(() => {
			let params = { ...formData.value }
			ChangePhoneApi(params).then(res => {
				GETUSERINFO()
				uni.navigateBack()
			})
		})
	}
</script>

<style lang="scss" scoped>
	.edit-phone {
		.content {
			padding: 0 12px;
			border-radius: 10px;
			background-color: #fff;
			box-sizing: border-box;
			.uni-forms-item {
				margin-bottom: 0;
				align-items: center;
				height: 50px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				.item {
					height: 50px;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						margin-right: 10px;
					}
					.value {
						flex: 1;
						margin-left: 10px;
						display: flex;
						align-items: center;
						justify-content: end;
						.text {
							flex: 1;
							color: #666666;
							font-size: 14px;
							font-weight: 400;
							text-align: left;
						}
						.right {
							width: 14px;
							height: 14px;
						}
					}
					.easy-input {
						flex: 1;
						color: #c4c4c4;
						font-size: 14px;
						font-weight: 400;
						// text-align: right;
						margin-left: 10px;
					}
				}
			}
			:deep(.uni-forms-item__error) {
				left: 0;
				top: 100%;
				right: 12px;
				font-size: 12px;
				text-align: right;
				padding-bottom: 3px;
				transform: translateY(-100%);
			}
		}
		.btn {
			margin-top: 20px;
			height: 50px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			text-align: center;
			line-height: 50px;
			background: #FF3B1E;
			border-radius: 106px;
		}
	}
</style>